<script setup lang='ts'>
  import { reactive, ref } from 'vue';
  import request from '@/api/index';
  import portrait from '@/components/portrait.vue';
  import xmdialog from '@/components/xmdialog.vue';
  import { xmloading, xmtoast } from '@/utils/public';
  import { userStore } from "@/pinia/modules/user";3
  import xmimg from '@/components/xmimg.vue';
  const inputRef = ref()
  const $emit = defineEmits(['change'])
  const action = reactive({
    show:false,
    list:[] as Array<any>
  })
  const listQuery = reactive({
    keywords:'',
    page:1,
    limit:20
  })
  const handleUser = (item:any = {})=>{
    const { user_id } = item
    if(!user_id) return
    action.show = false
    $emit('change',item)
  }
  const serachUser = async()=>{
    if(!listQuery.keywords) return xmtoast('请输入接收人名称/ID')
    action.list = []
    listQuery.page = 1
    inputRef.value.blur()
    getList()
  }
  const loadingSet = ref(false); // 是否处于加载状态
  const loadSet = ref(true); // 是否已加载完成 不再触发 load 事件
  const listload = ()=> {
    if(loadSet.value || action.list.length == 0) return
    console.log('loadSet.value', loadSet.value);
    console.log('action.list.length', action.list.length);
    listQuery.page += 1
    getList();
  };
  const getList = async()=>{
    const loading = xmloading('搜索中...')
    const res = await request.searchUser(listQuery)
    loading.close()
    const { list=[] } = res?.data || {}
    // 列表返回空 禁止触底事件
    if(list.length == 0) {
      loadSet.value = true
      return
    }
    action.list = [...action.list, ...list]
    loadSet.value = false
    loadingSet.value = false
    if(list.length < listQuery.limit) {
      loadSet.value = true
    }
  }
  const openDialog = ()=>{
    action.show = true
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <xmdialog v-model:dialogshow="action.show">
    <div class="content">
      <div class="serachUser flex-align">
        <div class="inputBox flex-align">
          <xmimg src="message/searchIcon.png" class="iconImg" />
          <form action="#" onsubmit="event.preventDefault();">
            <input
              ref="inputRef"
              name="search"
              id="search"
              type="search"
              v-model="listQuery.keywords"
              @change="serachUser"
              placeholder="请输入接收人名称/ID">
          </form>
        </div>
        <div @click="action.show = false" class="butText">取消</div>
      </div>
      <div class="listBorder">
        <div class="listBack">
          <div class="listPadding">
            <van-list
              class="list"
              :offset="80"
              v-model:loading="loadingSet"
              :finished="loadSet"
              @load="listload">
              <div
                v-for="item in action.list"
                class="userinfo flex-align"
                @click="handleUser(item)"
              >
                <portrait :image="item.image" />
                <div class="info">
                  <div class="nickName flex-align">
                    <span>{{ item.name }}</span>
                    <xmimg :src="item.gender == 1?'message/girl.png':'message/male.png'" class="iconImg" />
                  </div>
                  <div class="id">ID:{{ item.uuid }}</div>
                </div>
              </div>
            </van-list>
          </div>
        </div>
      </div>
    </div>
  </xmdialog>
  
</template>

<style lang='scss' scoped>
  .content {
    overflow: hidden;
    width: 303px;
    height: 436px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    .serachUser {
      z-index: 2;
      position: relative;
      padding: 14px 12px;
      background: var(--serachUserTopBackColor);
      .inputBox {
        flex: 1;
        height: 36px;
        padding: 0 12px;
        box-sizing: border-box;
        border-radius: 8px;
        background: var(--serachUserInputBackColor);
        border: var(--serachUserInputBorder);
        form {
          width: 100%;
        }
        .iconImg {
          width: 12px;
          height: 12px;
          margin-right: 8px;
        }
        input {
          width: 100%;
          color: var(--serachUserInputFontColor);
          font-size: 12px;
          font-weight: 400;
          background: none;
        }
        input::-webkit-search-cancel-button{
          display: none;
        }
        input::-webkit-input-placeholder {
          color: var(--serachUserInputTipsFontColor);
        }
      }
      .butText {
        line-height: 14px;
        color: var(--serachUserInputButFontColor);
        font-size: 14px;
        font-weight: 500;
        margin: 0 4px 0 16px;
      }
    }
    
    .listBorder {
      z-index: 1;
      position: relative;
      top: -5px;
      overflow: hidden;
      flex: 1;
      border-radius: 16px;
      padding: 3px;
      box-sizing: border-box;
      background: var(--serachUserListBoxBorder);
      .listBack {
        width: 100%;
        height: 100%;
        padding: 2px;
        box-sizing: border-box;
        border-radius: 13px;
        background: var(--serachUserListBorder);
      }
    }
    .list::-webkit-scrollbar-thumb {
      width: 5px;
      height: 30px;
      background: var(--serachUserListScrollbarColor);
      border-radius: 3px;
    }
    .listPadding {
      width: 100%;
      height: 100%;
      padding: 20px 20px 0;
      box-sizing: border-box;
      background: var(--serachUserListBackColor);
    }
    .list {
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 0 0 30px;
      border-radius: 10px;
      box-sizing: border-box;
      .userinfo {
        margin-bottom: 16px;
        :deep(.portrait) {
          width: 52px;
          height: 52px;
          margin-right: 10px;
        }
        .nickName {
          .iconImg {
            width: 18px;
            height: 18px;
            margin-left: 4px;
          }
          span {
            color: var(--serachUserListNickNameColor);
            font-size: 16px;
            font-weight: 500;
          }
        }
        .id {
          color: var(--serachUserListIDColor);
          font-size: 12px;
          font-weight: 400;
          line-height: 12px;
          margin-top: 8px;
        }
      }
    }
    .listBorder, .listBack, .list {
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
    }
  }
</style>